import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../pages/About'
import Home from '../pages/Home'
import Message from '../pages/Message'
import News from '../pages/News'
import Detail from '../pages/Detail'
Vue.use(VueRouter)
//创建并暴露一个router
export default new VueRouter({
    routes:[
        {   name:'guanyu',
            path:'/about',//路径
            component:About//组件
        },
        {   
            name:'zhuye',
            path:'/home',//路径
            component:Home,//组件
            children:[
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    children:[
                        {
                            name:'xiangqing',
                            //params参数
                            // path:'detail/:id/:title/:author',
                             //query参数
                             path:'detail',
                            component:Detail,
                            //路由配置中props的第一中写法（布尔值），作用将路由所收到的所有params参数，都以props的形式传递给路由组件
                            // props:true,
                            //路由配置props的第二种写法（对象）,几乎不用，作用对象的每一组key-value都以props的形式传递给路由组件
                            // props:{
                            //      id:'001',
                            //      title:'12345678900',
                            //      author:'xxxx',
                            //      a:100,
                            //      b:200,
                            //      c:[2,3,4,5,'u']
                            // }
                            //路由配置的props的第三种写法，函数,作用：将函数返回的那个对象的每一组的key-value都以props的形式传递给路由组件
                        //     props:function(route){
                        //       console.log(route)//当路由所有信息
                        //     //   return {
                        //     //       id:route.query.id,
                        //     //       title:route.query.title,
                        //     //       author:route.query.author
                        //     //   }
                        //       return {...route.query}
                        //    }
                             props:route =>({...route.query})   
                        }
                    ]
                },
                {   
                    name:'xinwen',
                    path:'news',
                    component:News,
                },
            ]
        },

    ]
})